<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://www.pimpas.net/web/jsf" prefix="pimp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<f:view>
	<html>
	<head>
	<title>PIMPAS FRAMEWORK - AJAX TESTS</title>
	<style>
	.personalDiv {
		background-color: pink;
		width: 400px;
		height: 300px;
	}
	</style>
	</head>
	<body>
		<h:form>
		<h:panelGrid columns="3">
			<h:outputLabel for="login">
				<h:outputText value="UserName"></h:outputText>
			</h:outputLabel>
				<h:inputText id="login" value="#{ajaxBean.login}">
					<f:validateLength minimum="3" maximum="8"/>
					<pimp:ajaxPopulate render="password" event="onKeyUp" actionListener="#{ajaxBean.processPasswordAjax}"></pimp:ajaxPopulate>
					<pimp:ajaxValidate event="onKeyUp"></pimp:ajaxValidate>
				</h:inputText>
			<pimp:message for="login"></pimp:message>
			<h:outputLabel for="password">
				<h:outputText value="Auto-Generate Password:"></h:outputText>
			</h:outputLabel>
			<h:inputText id="password" readonly="true" value="#{ajaxBean.password}">
			</h:inputText>
			<pimp:message for="password"></pimp:message>
			<h:commandButton type="button"  value="Populate Select">
				<pimp:ajaxPopulate render="mySelect" event="onclick" actionListener="#{ajaxBean.processColorsAjax}"></pimp:ajaxPopulate>
			</h:commandButton>
			<h:selectOneListbox id="mySelect" size="1" value="#{ajaxBean.color}">
				<f:selectItems value="#{ajaxBean.colors}"/>
			</h:selectOneListbox>
			<h:commandButton value="Submit Form"></h:commandButton>
			<h:outputLabel for="cars">
				<h:outputText value="Pick your cars:"></h:outputText>
			</h:outputLabel>
			<h:selectManyListbox id="cars" value="#{ajaxBean.selectedCars}">
				<f:selectItems value="#{ajaxBean.visibleCars}"/>
			</h:selectManyListbox>
			<pimp:message for="cars"></pimp:message>
			<h:outputLabel for="filterCars">
				<h:outputText value="Filter Cars:"></h:outputText>
			</h:outputLabel>
			<h:inputText id="filterCars" value="#{ajaxBean.filter}">
				<pimp:ajaxPopulate render="cars" event="onKeyUp" actionListener="#{ajaxBean.doFilter}"></pimp:ajaxPopulate>
			</h:inputText>
			<pimp:message for="filterCars"></pimp:message>
		</h:panelGrid>
		<h:outputLabel for="sports">
			<h:outputText value="Pick your sports:"></h:outputText>
		</h:outputLabel>
		<h:inputText id="teste">
			<pimp:customRegexValidator regex="[0-9]"></pimp:customRegexValidator>
			<pimp:ajaxValidate event="onBlur"></pimp:ajaxValidate>
		</h:inputText>
		<pimp:message for="teste"></pimp:message>
		</h:form>
		<pimp:ajaxPoolSize value="30"></pimp:ajaxPoolSize>
		<f:verbatim>
			<textarea readonly="true" id="logger" name="logger" cols="80" rows="20"></textarea>
		</f:verbatim>
		<script>
		function makeLog(str) {
			pimpas.DOM.setObjectValue( 'logger', pimpas.DOM.getObjectValue( 'logger' ) + "\n" + str);
		}
		/*
		new pimpas.Interval(200, function() {
		    var l0g = null;
			for(var i=0;i<pimpas.Log.instances.length;i++) {
				l0g = pimpas.Log.instances[i];
				while(l0g.hasMessage())
					makeLog(l0g.pop( ).message);
			}
		}, null).go();
		*/
		</script>
	</body>
	</html>
</f:view>